<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值字符串interpolate</title>
    <script src="../../lib/angularjs/angular1.6.3.min.js"></script>
</head>
<body>
    <div ng-app="Demo" ng-controller="testCtrl as ctrl">
        <input ng-model="ctrl.text" />{{ctrl.value}}
        <br/>{{ctrl.objStr}}
        <br/>
        <input ng-model="to" type="email" placeholder="email" />
        <textarea ng-model="emailBody"></textarea>
        <pre>{{previewText}}</pre>
    </div>
    <script>
        (function(){
            angular.module('Demo', [])
                .controller('testCtrl',["$interpolate","$scope",testCtrl]);
            function testCtrl($interpolate,$scope) {
                var vm = this;
                var obj = { value: "Hello" };
                var obj2 = { value: "Hello" ,name:"word"};
                vm.text = "World";
                $scope.$watch("ctrl.text",function(n,o){
                    var interpolate = $interpolate("{{value}} " + n);
                    vm.value = interpolate(obj);
                });
                var interpolate2 = $interpolate("{{value}} " + "{{name}}");
                vm.objStr=interpolate2(obj2);

                $scope.$watch('emailBody',function(body) {
                    if(body) {
                        var template = $interpolate(body);
                        $scope.previewText = template({to:$scope.to})
                    }
                })
            }
        }());
    </script>
</body>
</html>